<template>
  <div id="app">
    <h1>数字比大小</h1>
    <div>
      <label for="num1">请输入第一个数字:</label>
      <input v-model="num1" type="text" id="num1">
    </div>
    <div>
      <label for="num2">请输入第二个数字:</label>
      <input v-model="num2" type="text" id="num2">
    </div>
    <button @click="compareNumbers">比较</button>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="result" class="result">{{ result }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num1: '',
      num2: '',
      result: '',
      error: ''
    };
  },
  methods: {
    compareNumbers() {
      this.error = '';
      this.result = '';
      if (isNaN(parseFloat(this.num1)) || isNaN(parseFloat(this.num2))) {
        this.error = '请输入有效的数字';
        return;
      }
      const num1 = parseFloat(this.num1);
      const num2 = parseFloat(this.num2);
      if (num1 > num2) {
        this.result = `${num1} 大于 ${num2}`;
      } else if (num1 < num2) {
        this.result = `${num1} 小于 ${num2}`;
      } else {
        this.result = `${num1} 等于 ${num2}`;
      }
    }
  }
};
</script>